<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US" xml:lang="en">
<head>
    <meta name="google-site-verification" content="LgblCrocw4d4ccdOkob0kzt3Ing7mMy1dKTtLoUb-2s" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta name="keywords" content="how crop images, how zoom images, crop image,CropZooom, rotate image, zoom image, jquery plugin, crop plugin, zoom plugin, rotation, croppping, zooming" />
	<meta name="description" content="CropZoom is a plugin that let you select, rotate and zoom an image to make a crop. This is free and ready to use." />
    <title>CropZoom another Jquery Plugin</title>

    <script type="text/javascript" src="js/script.js"></script>
    <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
    <!--[if IE 6]><link rel="stylesheet" href="css/style.ie6.css" type="text/css" media="screen" /><![endif]-->
    <!--[if IE 7]><link rel="stylesheet" href="css/style.ie7.css" type="text/css" media="screen" /><![endif]-->
</head>
<body>
<div id="page-background-simple-gradient">
    </div>
    <div id="page-background-glare">
        <div id="page-background-glare-image"></div>
    </div>
    <div id="main">
        <div class="Sheet">
            <div class="Sheet-tl"></div>
            <div class="Sheet-tr"></div>
            <div class="Sheet-bl"></div>
            <div class="Sheet-br"></div>
            <div class="Sheet-tc"></div>
            <div class="Sheet-bc"></div>
            <div class="Sheet-cl"></div>
            <div class="Sheet-cr"></div>
            <div class="Sheet-cc"></div>
            <div class="Sheet-body">
                <div class="nav">
                    <div class="l"></div>
                    <div class="r"></div>
                    <ul class="menu">
                        <li>
                            <a href="index.html"><span class="l"></span><span class="r"></span><span class="t">About</span></a>
                        </li>
                        <li>
                            <a href="download.html" class=" active"><span class="l"></span><span class="r"></span><span class="t">Download and Docs</span></a>
                        </li>        
                    </ul>
                </div>
                <script type="text/javascript"><!--
                google_ad_client = "pub-1574243574266511";
                /* 468x60, creado 17/01/10 */
                google_ad_slot = "7438542030";
                google_ad_width = 468;
                google_ad_height = 60;
                //-->
                </script>
                <script type="text/javascript"
                src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
                </script>
                <div class="contentLayout">
                    <div class="content">
                        <div class="Post">
                            <div class="Post-body">
                                <div class="Post-inner">
                                        <div class="PostMetadataHeader">
                                            <h2 class="PostHeader">
                                                Files
                                            </h2>
                                        </div>
                                        <div class="PostContent">
                                            This project is hosted in code.google.com so you can download the files and also collaborate with it,
					    here you will be able to add new issues and see how it's going. I want to thank all the collaborations made.
					    <a href="http://code.google.com/p/cropzoom/"> click here to get the source code</a><br />
                                            <br />
                                            <br />
                                            <br />
                                             <form action="https://www.paypal.com/cgi-bin/webscr" method="post">
                                                <input type="hidden" name="cmd" value="_s-xclick" />
                                                <input type="hidden" name="encrypted" value="-----BEGIN PKCS7-----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-----END PKCS7-----" />
                                                <input type="image" src="https://www.paypal.com/en_US/i/btn/btn_donateCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!" />
                                                <img alt="" border="0" src="https://www.paypal.com/es_XC/i/scr/pixel.gif" width="1" height="1" />
                                            </form>
                                        </div>
                                        <div class="cleared"></div>
                        </div>
                        <div class="cleared"></div>
                       </div>
                     </div>
                        <div class="Post">
                            <div class="Post-body">
                                <div class="Post-inner">
                                        <div class="PostMetadataHeader">
                                            <h2 class="PostHeader">
                                                Change Log
                                            </h2>
                                        </div>
                                        <div class="PostContent">
					    <p>
                                                <b>07/08/2011</b>
                                                <i>Release 1.1</i><br />
                                                Fix for IE9, also was added two new properties to the image object, X and Y, those could be set at creation time.
                                            </p>
                                            <p>
                                                <b>06/02/2011</b>
                                                <i>Release 1.1</i><br />
                                                Change the location of the callbacks, in the documentations says that it comes inside his element, but before were in the root config options, now are inside his elements, e.g. (Selector element contain onSelectorDrag, onSelectorDragStop, onSelectorResize, onSelectorResizeStop) and the images callbacks (Image element contain onZoom, onRotate, onImageDrag)
                                            </p>
					    <p>
                                                <b>06/02/2011</b>
                                                <i>Release 1.1</i><br />
                                                Fix the rotation default value, and setSelector method to the correct element.
                                            </p>
					    					<p>
                                                <b>05/24/2011</b>
                                                <i>Release 1.1</i><br />
                                                Fix some issues with the zoom slider. calculation the start position in the slider and the w/h of the image.
                                            </p>
                                            <p>
                                                <b>10/12/2010</b>
                                                <i>Release 1.1</i><br />
                                                Fixed issues multiples intances of cropzoom.
                                            </p>
                                            <p>
                                                <b>10/07/2010</b>
                                                <i>Release 1.1</i><br />
                                                2 New properties to the selector object, that allow to start with and overlayed image, and don't take off this overlay
                                                even if you are dragging or resizeing...
                                            </p>
                                            <p>
                                                <b>09/04/2010</b>
                                                <i>Release 1.1</i><br />
                                                A new version was released, this version contain new features like expose the zoom control to another element in the page, 
                                                a new movement control, snap the image to the container and more.
                                            </p>
                                            <p>
                                                <b>09/30/2010</b>
                                                <i>Release 1.0.4</i><br />
                                                Fix made by David Skyba - Using multiples instances of cropzoom broken the plugin, He make a fix for this.
                                            </p>
                                            <p>
                                                <b>04/17/2010</b>
                                                <i>Release 1.0.4</i><br /> 
                                                2 new Properties to de plugin was added, please read below the documentation.<br />
                                                Fix issue when you crop with some degrees and zoomming the crop was not correct, this
                                                is a PHP Server file issue not plugin.
                                            </p>
                                            <p>
                                                <b>03/03/2010</b> 
                                                5 new porperties to the selector object, please read below the documentation.
                                            </p>
                                            <p>
                                                <b>27/02/2010</b> The last fix broken the drag into FireFox browser so we need to do that only for Webkit browsers.<br />
<pre>
if (this.options.helper == 'original' &amp;&amp; !(/^(?:r|a|f)/).test(this.element.css("position"))){
            if($.browser.safari)
                this.element[0].style.position = 'absolute';
            else
                this.element[0].style.position = 'relative';    
        }
</pre>
                                            </p>
                                            <p>
                                                <b>04/02/2010</b> Fix the drag in Safari and Chrome<br />
                                                I think this is a fix made by me (I'm not sure if this break something else into the other Jquery UI plugins).<br />
                                                The hack is in the line of the jquery-ui.1.7.2.custom.js file
<pre>
before:
if (this.options.helper == 'original' &amp;&amp; !(/^(?:r|a|f)/).test(this.element.css("position")))
this.element[0].style.position = 'relative';
after:
if (this.options.helper == 'original' &amp;&amp; !(/^(?:r|a|f)/).test(this.element.css("position")))
this.element[0].style.position = 'absolute';
</pre>
                                                 I think that there is no difference with this change because the draggable plugin make the position to absolute when it is dragged and 
                                                 then changes to relative.
                                                 
                                                 Please test and give your feedback. ;)
                                            </p>
                                            <p>
                                                <b>26/01/2010</b> Fix the function getExtensionSource<br />
                                                IE8 makes an error in the line _self[0].ownerDocument.namespaces.add('v', 'urn:schemas-microsoft-com:vml', "#default#VML");<br />
                                                The Quick fix is add this line into the HTML tag xmlns:v="urn:schemas-microsoft-com:vml".<br />
                                                If this not works you can also try adding this line &lt;meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /&gt;
                                                
                                            </p>
                                            <p><b>16/01/2010</b> First Release
                                             </p>
                                        </div>
                                        <div class="cleared"></div>
                        </div>
                        <div class="cleared"></div>
                       </div>
                     </div> 
                        <div class="Post">
                            <div class="Post-body">
                                <div class="Post-inner">
                                        <div class="PostMetadataHeader">
                                            <h2 class="PostHeader">
                                                Requirements and Implementation
                                            </h2>
                                        </div>
                                        <div class="PostContent">
                                            <p>This plugin require: JQuery 1.3+, (CropZoom 1.0 : JQuery UI 1.7+, CropZoom 1.1: JQuery UI 1.8+)</p>
                                            <br />
<code>
<pre>
&lt;link href="css/jquery-ui-1.7.2.custom.css" rel="Stylesheet" type="text/css" /&gt; 
&lt;script type="text/javascript" src="js/jquery-1.3.2.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="js/jquery.cropzoom.js"&gt;&lt;/script&gt;
</pre>
</code>
 <div class="codigo">
                                                <code>
                                                    <pre>
$(document).ready(function(){
          var cropzoom = $('#crop_container2').cropzoom({
            width:400,
            height:300,
            bgColor: '#CCC',
            enableRotation:true,
            enableZoom:true,
            zoomSteps:10,
            rotationSteps:10,
            expose:{
                slidersOrientation: 'horizontal',
                zoomElement: '#zoom',
                rotationElement: '#rot',
                elementMovement:'#movement'
            },
            selector:{        
              centered:true,
              borderColor:'blue',
              borderColorHover:'yellow'
            },
            image:{
                source:'chicas1024.jpg',
                width:1024,
                height:768,
                minZoom:50,
                maxZoom:200,
                startZoom:40,
                useStartZoomAsMinZoom:true,
                snapToContainer:true
            }
        });
});
                                                    </pre>
                                                </code>
                                              </div>
                                        </div>
                                        <div class="cleared"></div>
                        </div>
                        <div class="cleared"></div>
                       </div>
                     </div> 
                        <div class="Post">
                            <div class="Post-body">
                                <div class="Post-inner">
                                        <div class="PostMetadataHeader">
                                            <h2 class="PostHeader">
                                                Documentation
                                            </h2>
                                        </div>
                                        <div class="PostContent">
                                        </div>
                                        <div class="cleared"></div>
                        </div>
                        <div class="Post">
                            <div class="Post-body">
                                <div class="Post-inner">
                                        <div class="PostMetadataHeader">
                                            <h2 class="PostHeader">
                                                General parameters
                                            </h2>
                                        </div>
                                        <div class="PostContent">
                                            <table width="100%" cellpadding="2" cellspacing="0" align="center">
                                                <tr>
                                                    <th>Type</th>
                                                    <th>Parameter Name</th>
                                                    <th>Default</th>
                                                    <th>Description</th>
                                                </tr>
                                                <tr>
                                                    <td>Property</td>
                                                    <td align="left">width</td>
                                                    <td>640</td>
                                                    <td align="left">Width of the Container</td>
                                                </tr>
                                                <tr>
                                                    <td>Property</td>
                                                    <td align="left">Height</td>
                                                    <td>480</td>
                                                    <td align="left">Height of the Container</td>
                                                </tr>
                                                <tr>
                                                    <td>Property</td>
                                                    <td align="left">bgColor</td>
                                                    <td>#000</td>
                                                    <td align="left">Background of the Container</td>
                                                </tr>
                                                <tr>
                                                    <td>Property</td>
                                                    <td align="left">overlayColor</td>
                                                    <td>#000</td>
                                                    <td align="left">Color of the overlay layer when drag the selector</td>
                                                </tr>
                                                <tr>
                                                    <td>Property</td>
                                                    <td align="left">enableRotation</td>
                                                    <td>true</td>
                                                    <td align="left">Enable/Disable the rotation slider</td>
                                                </tr>
                                                <tr>
                                                    <td>Property</td>
                                                    <td align="left">enableZoom</td>
                                                    <td>true</td>
                                                    <td align="left">Enable/Disable the zoom slider</td>
                                                </tr>
                                                <tr>
                                                    <td>Property</td>
                                                    <td align="left">rotationSteps</td>
                                                    <td>5</td>
                                                    <td align="left">Set the steps for the rotation slider</td>
                                                </tr>
                                                <tr>
                                                    <td>Property</td>
                                                    <td align="left">zoomSteps</td>
                                                    <td>1</td>
                                                    <td align="left">Set the steps for the zoom slider</td>
                                                </tr>
                                                <tr>
                                                    <td>Method</td>
                                                    <td align="left">restore</td>
                                                    <td></td>
                                                    <td align="left">this restore the plugin to the original values</td>
                                                </tr>
                                                <tr>
                                                    <td>Method</td>
                                                    <td align="left">send</td>
                                                    <td></td>
                                                    <td align="left">this method will send the information to the server for cropping.
                                                        <br />
                                                        <i>Parameters</i>
                                                        <ul>
                                                            <li><b>url</b>: location of the server file to process the cropping</li>
                                                            <li><b>type</b>: post / get</li>
                                                            <li><b>custom</b>: json object to add in the request e.g. {id=1,username='jhon'}</li>
                                                            <li><b>onSuccess</b>: callback to get the response of the request.</li>
                                                        </ul>
                                                        <b>e.g: cropzoom.send('process.php','POST',{id:1},function(r){
                                                            alert(r);
                                                        });</b>  
                                                    </td>
                                                </tr>
                                            </table>
                                        </div>
                                        <div class="cleared"></div>
                        </div>
                        <div class="cleared"></div>
                       </div>
                     </div>
                        <div class="Post">
                            <div class="Post-body">
                                <div class="Post-inner">
                                        <div class="PostMetadataHeader">
                                            <h2 class="PostHeader">
                                                Selector Properties, Callbacks, methods.
                                            </h2>
                                        </div>
                                        <div class="PostContent">
                                            <table width="100%" cellpadding="2" cellspacing="0" align="center">
                                                <tr>
                                                    <th>Type</th>
                                                    <th>Parameter Name</th>
                                                    <th>Default</th>
                                                    <th>Description</th>
                                                </tr>
                                                <tr>
                                                    <td>Property</td>
                                                    <td align="left">showPositionsOnDrag</td>
                                                    <td>true</td>
                                                    <td align="left">Enable/Disable info of X and Y axis in the selector</td>
                                                </tr>
                                                <tr>
                                                    <td>Property</td>
                                                    <td align="left">showDimetionsOnDrag</td>
                                                    <td>true</td>
                                                    <td align="left">Enable/Disable info of width and height in the selector</td>
                                                </tr>
                                                <tr>
                                                    <td>Property</td>
                                                    <td align="left">borderColor</td>
                                                    <td>yellow</td>
                                                    <td align="left">Change the border color of the selector</td>
                                                </tr>
                                                <tr>
                                                    <td>Property</td>
                                                    <td align="left">borderColorHover</td>
                                                    <td>red</td>
                                                    <td align="left">Change the border color of the selector on mouse over</td>
                                                </tr>
                                                <tr>
                                                    <td>Property</td>
                                                    <td align="left">Centered</td>
                                                    <td>false</td>
                                                    <td align="left">Center the selector in the container</td>
                                                </tr>
                                                <tr>
                                                    <td>Property</td>
                                                    <td align="left">x</td>
                                                    <td>0</td>
                                                    <td align="left">x axis value from selector</td>
                                                </tr>
                                                <tr>
                                                    <td>Property</td>
                                                    <td align="left">y</td>
                                                    <td>0</td>
                                                    <td align="left">y axis value from selector</td>
                                                </tr>
                                                <tr>
                                                    <td>Property</td>
                                                    <td align="left">w</td>
                                                    <td>229</td>
                                                    <td align="left">width of the selector (you can resize to this value as minimum)</td>
                                                </tr>
                                                <tr>
                                                    <td>Property</td>
                                                    <td align="left">h</td>
                                                    <td>100</td>
                                                    <td align="left">height of the selector (you can resize to this value as minimum)</td>
                                                </tr>
                                                <tr>
                                                    <td>Property</td>
                                                    <td align="left">aspectRatio</td>
                                                    <td>false</td>
                                                    <td align="left">this keep the aspect ratio of the selector when resize</td>
                                                </tr>
                                                <tr>
                                                    <td>Property</td>
                                                    <td align="left">maxWidth</td>
                                                    <td>null</td>
                                                    <td align="left">this will be the limit of the selector width</td>
                                                </tr>
                                                <tr>
                                                    <td>Property</td>
                                                    <td align="left">maxHeight</td>
                                                    <td>null</td>
                                                    <td align="left">this will be the limit of the selector height</td>
                                                </tr>
                                                <tr>
                                                    <td>Property</td>
                                                    <td align="left">bgInfoLayer</td>
                                                    <td>#FFF</td>
                                                    <td align="left">this will be set the background-color of the info layer that appears over the selector</td>
                                                </tr>
                                                <tr>
                                                    <td>Property</td>
                                                    <td align="left">infoFontSize</td>
                                                    <td>10</td>
                                                    <td align="left">this will be set the font-size of the info layer that appears over the selector</td>
                                                </tr>
                                                <tr>
                                                    <td>Property</td>
                                                    <td align="left">infoFontColor</td>
                                                    <td>blue</td>
                                                    <td align="left">this will be set the font color of the info layer that appears over the selector</td>
                                                </tr>
                                                <tr>
                                                    <td>Property</td>
                                                    <td align="left">startWithOverlay</td>
                                                    <td>false</td>
                                                    <td align="left">this will be turn on the dark overlay at start</td>
                                                </tr>
                                                <tr>
                                                    <td>Property</td>
                                                    <td align="left">hideOverlayOnDragAndResize</td>
                                                    <td>true</td>
                                                    <td align="left">this will be turn on or turn of the dark overlay when you drag or resize.</td>
                                                </tr>
                                                <tr>
                                                    <td>Method</td>
                                                    <td align="left">setSelector</td>
                                                    <td></td>
                                                    <td align="left">this method will positioned the selector in the axis given and set the width and height, the last parameter is if this transition will be animated
                                                        fires when the selector is dragged
                                                        <br />
                                                        <i>Parameters</i>
                                                        <ul>
                                                            <li><b>x</b>: value for x axis</li>
                                                            <li><b>y</b>: value for y axis</li>
                                                            <li><b>w</b>: value for width</li>
                                                            <li><b>h</b>: value for height</li>
                                                            <li><b>animated</b>: true/false</li>
                                                        </ul>
                                                        <b>e.g: cropzoom.setSelector(15,15,200,100,true);</b>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td>Callback</td>
                                                    <td align="left">onSelectorDrag</td>
                                                    <td></td>
                                                    <td align="left">
                                                        fires when the selector is dragged
                                                        <br />
                                                        <i>Parameters</i>
                                                        <ul>
                                                            <li><b>object</b>: selector</li>
                                                            <li><b>positions</b>: x,y, width and height of the selector</li>
                                                        </ul>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td>Callback</td>
                                                    <td align="left">onSelectorDragStop</td>
                                                    <td></td>
                                                    <td align="left">
                                                        fires when the selector drag stop
                                                        <br />
                                                        <i>Parameters</i>
                                                        <ul>
                                                            <li><b>object</b>: selector</li>
                                                            <li><b>positions</b>: x,y, width and height of the selector</li>
                                                        </ul>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td>Callback</td>
                                                    <td align="left">onSelectorResize</td>
                                                    <td></td>
                                                    <td align="left">
                                                        fires when the selector is resized
                                                        <br />
                                                        <i>Parameters</i>
                                                        <ul>
                                                            <li><b>object</b>: selector</li>
                                                            <li><b>positions</b>: x,y, width and height of the selector</li>
                                                        </ul>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td>Callback</td>
                                                    <td align="left">onSelectorResizeStop</td>
                                                    <td></td>
                                                    <td align="left">
                                                        fires when the selector resize stop
                                                        <br />
                                                        <i>Parameters</i>
                                                        <ul>
                                                            <li><b>object</b>: selector</li>
                                                            <li><b>positions</b>: x,y, width and height of the selector</li>
                                                        </ul>
                                                    </td>
                                                </tr>
                                            </table>
                                        </div>
                                        <div class="cleared"></div>
                        </div>
                        <div class="cleared"></div>
                       </div>
                     </div>
                      <div class="Post">
                            <div class="Post-body">
                                <div class="Post-inner">
                                        <div class="PostMetadataHeader">
                                            <h2 class="PostHeader">
                                                Expose Properties.
                                            </h2>
                                        </div>
                                        <div class="PostContent">
                                            <table width="100%" cellpadding="2" cellspacing="2" align="center">
                                                <tr>
                                                    <th>Type</th>
                                                    <th>Parameter Name</th>
                                                    <th>Default</th>
                                                    <th>Description</th>
                                                </tr>
                                                <tr>
                                                    <td>Property</td>
                                                    <td align="left">slidersOrientation</td>
                                                    <td>horizontal</td>
                                                    <td align="left">set the direction of the zoom and rotation sliders into the exposed element</td>
                                                </tr>
                                                <tr>
                                                    <td>Property</td>
                                                    <td align="left">zoomElement</td>
                                                    <td>NULL</td>
                                                    <td align="left">the DOM Element that will contain the zoom slider.</td>
                                                </tr>
                                                <tr>
                                                    <td>Property</td>
                                                    <td align="left">rotationElement</td>
                                                    <td>NULL</td>
                                                    <td align="left">the DOM Element that will contain the rotation slider</td>
                                                </tr>
                                                <tr>
                                                    <td>Property</td>
                                                    <td align="left">elementMovement</td>
                                                    <td>NULL</td>
                                                    <td align="left">the DOM Element that will contain the MOVEMENT CONTROL</td>
                                                </tr>
                                                <tr>
                                                    <td>Property</td>
                                                    <td align="left">movementSteps</td>
                                                    <td>5</td>
                                                    <td align="left">number of pixel that the image will move when click on one of the buttons into the MOVEMENT CONTROL</td>
                                                </tr>
                                            </table>
                                        </div>
                                        <div class="cleared"></div>
                        </div>
                        <div class="cleared"></div>
                       </div>
                     </div>
                     <div class="Post">
                            <div class="Post-body">
                                <div class="Post-inner">
                                        <div class="PostMetadataHeader">
                                            <h2 class="PostHeader">
                                                Image Properties, Callbacks and methods.
                                            </h2>
                                        </div>
                                        <div class="PostContent">
                                            <table width="100%" cellpadding="2" cellspacing="2" align="center">
                                                <tr>
                                                    <th>Type</th>
                                                    <th>Parameter Name</th>
                                                    <th>Default</th>
                                                    <th>Description</th>
                                                </tr>
                                                <tr>
                                                    <td>Property</td>
                                                    <td align="left">source</td>
                                                    <td></td>
                                                    <td align="left">path of the image to use</td>
                                                </tr>
                                                <tr>
                                                    <td>Property</td>
                                                    <td align="left">rotation</td>
                                                    <td>0</td>
                                                    <td align="left">rotation in degrees of the image</td>
                                                </tr>
						<tr>
                                                    <td>Property</td>
                                                    <td align="left">x <span style="color:red;">NEW</span></td>
                                                    <td>0</td>
                                                    <td align="left">x axis value</td>
                                                </tr>
                                                <tr>
                                                    <td>Property</td>
                                                    <td align="left">y <span style="color:red;">NEW</span></td>
                                                    <td>0</td>
                                                    <td align="left">y axis value</td>
                                                </tr>
                                                <tr>
                                                    <td>Property</td>
                                                    <td align="left">width</td>
                                                    <td>0</td>
                                                    <td align="left">original width of the image</td>
                                                </tr>
                                                <tr>
                                                    <td>Property</td>
                                                    <td align="left">height</td>
                                                    <td>0</td>
                                                    <td align="left">original height of the image</td>
                                                </tr>
                                                <tr>
                                                    <td>Property</td>
                                                    <td align="left">minZoom</td>
                                                    <td>10</td>
                                                    <td align="left">percent of the minimum zoom of the image</td>
                                                </tr>
                                                <tr>
                                                    <td>Property</td>
                                                    <td align="left">maxZoom</td>
                                                    <td>150</td>
                                                    <td align="left">percent of the maximum zoom of the image</td>
                                                </tr>
                                                <tr>
                                                    <td>Property</td>
                                                    <td align="left">startZoom</td>
                                                    <td>50</td>
                                                    <td align="left">percent of the starting zoom of the image</td>
                                                </tr>
                                                <tr>
                                                    <td>Property</td>
                                                    <td align="left">useStartZoomAsMinZoom</td>
                                                    <td>true</td>
                                                    <td align="left">use the <b>minZoom</b> property as startZoom promerty <b>startZoom</b> will be ignored</td>
                                                </tr>
                                                <tr>
                                                    <td>Property</td>
                                                    <td align="left">snapToContainer</td>
                                                    <td>false</td>
                                                    <td align="left">this allow to drag the image into the container boundaries.</td>
                                                </tr>
                                                <tr>
                                                    <td>Callback</td>
                                                    <td align="left">onZoom</td>
                                                    <td></td>
                                                    <td align="left">
                                                        fires when the image is zommed
                                                        <br />
                                                        <i>Parameters</i>
                                                        <ul>
                                                            <li><b>object</b>: image</li>
                                                            <li><b>positions</b>: x,y, width and height of the image</li>
                                                        </ul>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td>Callback</td>
                                                    <td align="left">onRotate</td>
                                                    <td></td>
                                                    <td align="left">
                                                        fires when the image is rotated
                                                        <br />
                                                        <i>Parameters</i>
                                                        <ul>
                                                            <li><b>object</b>: image</li>
                                                            <li><b>degrees</b>: number of degrees</li>
                                                        </ul>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td>Callback</td>
                                                    <td align="left">onImageDrag</td>
                                                    <td></td>
                                                    <td align="left">
                                                        fires when the image is dragged
                                                        <br />
                                                        <i>Parameters</i>
                                                        <ul>
                                                            <li><b>object</b>: image</li>
                                                            <li><b>positions</b>: x,y, width and height of the image</li>
                                                        </ul>
                                                    </td>
                                                </tr>
                                            </table>
                                        </div>
                                        <div class="cleared"></div>
                                        <script type="text/javascript"><!--
                google_ad_client = "pub-1574243574266511";
                /* 468x60, creado 17/01/10 */
                google_ad_slot = "7438542030";
                google_ad_width = 468;
                google_ad_height = 60;
                //-->
                </script>
                <script type="text/javascript"
                src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
                </script>
                        </div>
                        <div class="cleared"></div>
                       </div>
                     </div>
                    </div>
                </div>
                <div class="cleared"></div><div class="Footer">
                    <div class="Footer-inner">
                        <div class="Footer-text">
                            <p><a href="mailto:gastonrobledo@gmail.com">Contact</a>
                                Copyright &copy; 2009 Gaston Robledo (<a href="http://www.codigosutiles.com.ar/" target="_blank">Codigos Utiles</a>). All Rights Reserved.</p>
                        </div>                                                                                     
                    </div>
                    <div class="Footer-background"></div>
                </div>
                <div class="cleared"></div>
            </div>
        </div>
        <div class="cleared"></div>
    </div>
    </div>
    </div>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-12533608-1");
pageTracker._trackPageview();
} catch(err) {}</script>
</body>
</html>
